<template>
  <div class="basic-page">
    <div class="title">{{ item.label }}</div>
    <PasswordReset class="form" :user-name-val="userNameVal" @on-submit-success="onSubmitSuccess" />
  </div>
</template>

<script>
import { getUser } from '@/api/user'
import PasswordReset from '@/components/PasswordReset'
export default {
  name: 'Password',
  components: {
    PasswordReset
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      userNameVal: ''
    }
  },
  mounted() {
    const user = JSON.parse(sessionStorage.getItem('user'))
    if (user && Object.keys(user).length) {
      this.userNameVal = user.username
    } else {
      this.fetchUser()
    }
  },
  methods: {
    onSubmitSuccess() {
      this.$message({
        message: '即将跳转登录页，请用新密码登录！',
        type: 'success',
        duration: 2 * 1000
      })
      setTimeout(() => {
        this.$store.commit('user/SET_LOGIN_OUT')
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      }, 2 * 1000)
    },
    async fetchUser() {
      const res = await getUser()
      this.userNameVal = res.data.username
      sessionStorage.setItem('user', JSON.stringify(res.data))
    }
  }
}
</script>

<style scoped>

</style>
